<template>
	<div>
		<ul class="mui-table-view">
			<li class="mui-table-view-cell">
				<div class="img-center">
					<img :src="albums">
				</div>
			</li>
			<li class="mui-table-view-cell">
				介绍：{{imtro}}
			</li>
			<li class="mui-table-view-cell">
				食材：{{burden}}
			</li>
			<li class="mui-table-view-cell">
				配料：{{ingredients}}

			</li>
		</ul>
		<ul class="mui-table-view">
			<li class="mui-table-view-cell" v-for="step in steps">
				<div class="img-center">
					<img :src="step.img">
				</div>
				<br />
				<p>{{step.step}}</p>
			</li>
		</ul>
	</div>
</template>

<script>
	import {
		getCookMap
	} from '@/http/api.js'
	export default {
		data() {
			return {
				albums: '', //封面
				burden: '', //配料
				ingredients: '', //食材
				imtro: '', //介绍
				steps: '' //步骤
			}
		},
		created() {
			var cookname = this.$route.query.cookname;
			document.getElementsByClassName('mui-title')[0].innerHTML = cookname
			getCookMap({
				'menu': cookname,
			}).then(res => {
				mui.toast('正在加载中...');
				var result = res.result.data[0];
				console.log(result);
				this.albums = result.albums;
				this.burden = result.burden;
				this.ingredients = result.ingredients;
				this.imtro = result.imtro;
				this.steps = result.steps;
			})
		}
	}
</script>

<style>
	.img-center{
		text-align: center;
	}
</style>
